/**
 * Created by Administrator on 2017/3/3 0003.
 */
import React , {Component}from 'react';
import Styles from '../util/Styles.js'

/*
 * style 传递主键属性 boject
 * titletext input框前文字，如不添加默认为无 string
 * space input框前文字与input框之间的距离 int
 * defaultvalute input框中默认文字 string
 * value 输入的文字 string
 * type 输入类型 string
 * regular 正则
 * disabled 是否只读
 * multiline 是否多行输入
 * maxlength 最多输入长度
 *
 * this.state.text  输入内容
 * this.isrule      正则是否通过
 * */
export default class InputBox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text: '',
            placeholder: '',
            errorhint:'',
            disabled: false,
            /*校验输入内容前后是否可以有空格，默认可以有*/
            spaceFlag:"true",
        }
        this.type = 'text'
        this.isrule = true;
        this.Style = {}
    }

    //asdasdsadasd
    componentWillMount() {
        this.setState({
            placeholder: this.props.defaultvalute,
            spaceFlag:this.props.spaceFlag || "true"
        });
        this.type = this.props.type || 'text';
        this.Style.textarea = {
            width : this.props.style&&this.props.style.width || 100,
            height : this.props.style&&this.props.style.height || 70,
            borderColor : this.props.style&&this.props.style.borderColor || 'grey',
            borderWidth : this.props.style&&this.props.style&&this.props.style.borderWidth || 1,
            marginLeft : this.props.style&&this.props.style.marginLeft || 0,
            outline:'none',
            resize:'none',
            paddingLeft : this.props.style&&this.props.style.paddingLeft || 0,
            paddingTop:this.props.style&&this.props.style.paddingTop || 0,
            background : this.props.style && this.props.style.background
        }

        this.Style.inputbox = {
            width : this.props.style&&this.props.style.width || 100,
            height : this.props.style&&this.props.style.height || 30,
            paddingLeft : this.props.style&&this.props.style.paddingLeft || 20,
            borderColor : this.props.style&&this.props.style.borderColor || 'grey',
            borderWidth : this.props.style&&this.props.style&&this.props.style.borderWidth || 1,
            marginLeft : this.props.style&&this.props.style.marginLeft || 0,
            paddingTop:this.props.style&&this.props.style.paddingTop || 0,
            background : this.props.style && this.props.style.background
        },


        this.Style.divmain = {
            position:'relative'
        },
        this.Style.main = {
            flexDirection:'row',
            display:'flex',
            justifyContent:'flex-end',
            marginTop:this.props.style&&this.props.style.marginTop || 0,
            alignItems:this.props.style&&this.props.style.alignItems || 'center',
            paddingRight : this.props.style&&this.props.style.paddingRight||0,
        }
        this.Style.span = {
            marginTop : this.props.style&&this.props.style.textmarginTop || 0
        }
    }

    textchange(e) {
        let textcontent = e.target.value;
        if(this.props.maxlength){
            if(textcontent.length>=this.props.maxlength+1){
                    return
                }
        }
        if(this.props.regular){
            this.isrule = false;
            if(this.props.regular.test(textcontent)){
                this.isrule = true;
                //处理空格
                if("false" == this.state.spaceFlag){
                    textcontent = textcontent.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');
                }
            }else{
                this.isrule = false;
            }
        }
        
        if(this.props.isloginintext){
            if(textcontent.indexOf(' ')>0||textcontent==' '){
                return
            }
        }
        this.setState({
            text: textcontent
        });
    }

    focuson() {
        if(this.props.focuson){
            this.props.focuson();
        }
        this.setState({
            placeholder: ''
        });
    }

    bluron() {
        if(this.props.bluron){
            this.props.bluron();
        }
        this.setState({
            placeholder: this.props.defaultvalute
        });
    }

    addtitleTetx() {
        if (this.props.titletext) {
            if(this.props.multiline){
                this.Style.textarea.marginLeft = this.props.space || 0
            }else{
                this.Style.inputbox.marginLeft = this.props.space || 0
            }

            return (
                <span style={this.Style.span}>{this.props.titletext}</span>
            );

        }
    }

    addtextContext(){
        if(this.props.multiline){
            return(
                <textarea style={this.Style.textarea} type={this.type} value={this.state.text}
                          className={this.props.className}
                       onChange={this.textchange.bind(this)}
                       onFocus={this.focuson.bind(this)} onBlur={this.bluron.bind(this)}
                       placeholder={this.state.placeholder} disabled={this.props.disabled||this.state.disabled}
                />
            );
        }else if(this.props.errorhint){
            return(
                <div style={this.Style.divmain}>
                    <input style={this.Style.inputbox} type={this.type} className={this.props.className}  value={this.state.text}
                           onChange={this.textchange.bind(this)}
                           onFocus={this.focuson.bind(this)} onBlur={this.bluron.bind(this)}
                           placeholder={this.state.placeholder} disabled={this.props.disabled||this.state.disabled}
                    />
                    <div style={this.Style.divspan}>{this.state.errorhint}</div>
                </div>
            );
        }else{
            return(
                <input style={this.Style.inputbox} type={this.type}  className={this.props.className} value={this.state.text}
                       onChange={this.textchange.bind(this)}
                       onFocus={this.focuson.bind(this)} onBlur={this.bluron.bind(this)}
                       placeholder={this.state.placeholder} disabled={this.props.disabled||this.state.disabled}
                />
            );
        }
    }


        render()
        {
            this.Style.divspan = {
                position:'absolute',
                top:0,
                right:0,
                width:90,
                height : this.props.style&&this.props.style.height || 30,
                color:'red',
                lineHeight:'40px',
                display:this.props.errorhint
            }
            return (
                <div style={this.Style.main}>
                    {
                        this.addtitleTetx()
                    }
                    {
                        this.addtextContext()
                    }


                </div>
            );
        }


}
